<template>
  <div class="wechatMon">
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" class="img" />
    </div>
    <div class="out_body">
      <div class="inner_all" v-if="content">
        <div class="inner_body">
          <div class="inner_head">
            <div class="left">
              <img :src="avatar_url" alt="头像" />
            </div>
            <div class="right">
              <div class="right_top">{{ name }}</div>
              <div class="right_bottom">{{ circle_name }}</div>
            </div>
          </div>
          <div class="inner_content">
            {{ content }}
          </div>
          <div class="inner_imgs">
            <div
              class="inner_img"
              v-for="(item, index) in image_list"
              :key="index"
            >
              <img
                :src="item.url"
                alt="图片预览"
                @click.stop="getImg(image_list, index)"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="placeholder" v-else>
        <van-skeleton avatar title :row="10" />
        <van-skeleton avatar title :row="10" />
      </div>
      <p class="editTime">编辑于04/02</p>
    </div>
    <div class="comment">
      <p style="margin: 5px">评论区</p>
      <div class="commentItem" v-for="item in 4" :key="item">
        <div class="itemHeader">
          <img
            src="https://img0.baidu.com/it/u=259150321,2520533732&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            alt=""
          />
          <div class="userName">用户12345687</div>
        </div>
        <div class="itemContent">
          最近这款车特别火，真滴顶！我看见朋友圈好多人都买的是这辆车
        </div>
        <div class="itemFooter">昨天 15:26</div>
      </div>
    </div>
  </div>
</template>

<script>
import { onBeforeMount, onMounted, reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ImagePreview } from "vant";
export default {
  name: "wechatMon",
  setup() {
    const route = useRoute();
    const router = useRouter();
    const getUserDynamic = async () => {
      // console.log(JSON.parse(route.params.data));
      const data = await JSON.parse(route.params.data);
      state.image_list = data.image_list;
      state.avatar_url = data.avatar_url;
      state.name = data.name;
      state.content = data.content;
      state.circle_name = data.circle_name;
    };

    onMounted(async () => {
      await getUserDynamic();
    })

    onBeforeMount( () => {
      window.scrollTo(0, 0);

    });
    const getImg = (item, index) => {
      state.images = [];
      item.forEach((i) => state.images.push(i.url));
      ImagePreview({
        images: state.images,
        startPosition: index,
        loop: true,
      });
    };

    const goBack = () => {
      router.back(-1);
    };
    const state = reactive({
      Images: [],
      image_list: [],
      avatar_url: null,
      name:null,
      content: "",
      circle_name: "",
    });
    return {
      ...toRefs(state),
      getImg,
      goBack,
    };
  },
};
</script>

<style lang="less" scoped>
.wechatMon {
  p {
    margin: 0;
  }
  .header {
    padding: 5px 10px;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    position: fixed;
    top: 0;
    z-index: 11;
    line-height: 30px;
    background: linear-gradient(10deg, #eee, #fff, #eee);
  }
  .out_body {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    margin-top: 40px;
    border-bottom: 2px solid #dbdbdb;
    .inner_all {
      box-sizing: border-box;
      background: #ddd;
      width: 100%;
      position: relative;
      .inner_body:not(last-child) {
        background: #fff;
        padding: 5px;
        overflow: hidden;
        box-sizing: border-box;
        width: 100%;
        .inner_head {
          display: flex;
          width: 100%;
          height: 40px;
          .left {
            flex: 0 0 40px;
            img {
              width: 100%;
            }
          }
          .right {
            flex: 1;
            .right_top {
              font-size: 16px;
              line-height: 25px;
              padding: 0 10px;
              text-align: left;
            }
            .right_bottom {
              font-size: 12px;
              line-height: 15px;
              padding: 0 10px;
              text-align: left;
              // background: #dac;
              color: #dad;
            }
          }
        }
        .inner_content {
          margin: 10px auto;
          font-size: 16px;
          padding: 0 5px;
          text-align: left;
        }
        .inner_imgs {
          width: 100%;
          display: flex;
          // word-wrap:break-word;
          // float: left;
          justify-content: left;
          align-items: center;
          min-height: 100px;
          flex-flow: wrap;
          .inner_img {
            flex: 1;
            width: 100%;
            max-width: 70%;
            min-width: 30%;
            padding: 0 5px;
            img {
              width: 100%;
              height: auto;
            }
          }
        }
      }
    }
    .editTime {
      margin: 5px 10px;
      font-size: 13px;
      color: #bdbdbd;
    }
  }
  .comment {
    width: 100%;
    height: 100%;
    padding: 10px 10px;
    box-sizing: border-box;
    .commentItem {
      width: 100%;
      height: 100%;
      padding: 5px 10px;
      box-sizing: border-box;
      .itemHeader {
        display: flex;
        img {
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
        .userName {
          flex: 1;
          padding-left: 10px;
          color: #979aa8;
          font-size: 14px;
          box-sizing: border-box;
        }
      }
      .itemContent {
        font-size: 15px;
        padding: 5px 10px;
        box-sizing: border-box;
      }
      .itemFooter {
        color: #dbdbdb;
        font-size: 12px;
      }
    }
  }
}
</style>